
import React from 'react';
import { 
  Watch, 
  Smartphone, 
  PlusCircle, 
  BarChart3, 
  Bluetooth, 
  Check, 
  RefreshCw, 
  Heart, 
  Activity, 
  BedDouble
} from 'lucide-react';
import DashboardCard from '@/components/DashboardCard';
import { useInView } from '@/utils/animation';

const WearableDevices = () => {
  const { ref: headerRef, isInView: headerIsVisible } = useInView();
  const { ref: devicesRef, isInView: devicesAreVisible } = useInView(0.1);
  const { ref: statsRef, isInView: statsAreVisible } = useInView(0.1);

  // Connected devices data
  const connectedDevices = [
    {
      name: 'Apple Watch Series 8',
      type: 'smartwatch',
      icon: <Watch className="h-6 w-6" />,
      connected: true,
      batteryLevel: 78,
      lastSync: '10分钟前',
      gradient: 'linear-gradient(120deg, #4FD1C5 0%, #63B3ED 100%)'
    },
    {
      name: 'Mi Band 7',
      type: 'fitnesstracker',
      icon: <Watch className="h-6 w-6" />,
      connected: true,
      batteryLevel: 45,
      lastSync: '2小时前',
      gradient: 'linear-gradient(120deg, #F87171 0%, #FCA5A5 100%)'
    },
    {
      name: 'iPhone 14 Pro',
      type: 'smartphone',
      icon: <Smartphone className="h-6 w-6" />,
      connected: true,
      batteryLevel: 92,
      lastSync: '刚刚',
      gradient: 'linear-gradient(120deg, #A78BFA 0%, #C4B5FD 100%)'
    }
  ];

  // Device metrics data
  const deviceMetrics = [
    {
      title: '心率',
      value: '72',
      unit: 'bpm',
      icon: <Heart className="h-5 w-5" />,
      color: 'text-dopamine-coral',
      bg: 'bg-dopamine-coral/10',
      change: '-3',
      source: 'Apple Watch'
    },
    {
      title: '步数',
      value: '8,452',
      unit: '步',
      icon: <Activity className="h-5 w-5" />,
      color: 'text-dopamine-teal',
      bg: 'bg-dopamine-teal/10',
      change: '+1,245',
      source: 'Apple Watch'
    },
    {
      title: '睡眠',
      value: '7.5',
      unit: '小时',
      icon: <BedDouble className="h-5 w-5" />,
      color: 'text-dopamine-purple',
      bg: 'bg-dopamine-purple/10',
      change: '+0.5',
      source: 'Mi Band 7'
    }
  ];

  // Available devices to connect
  const availableDevices = [
    {
      name: 'Oura Ring Gen 3',
      type: 'ring',
      compatibility: '兼容',
      gradient: 'linear-gradient(120deg, #4FD1C5 0%, #63B3ED 100%)'
    },
    {
      name: 'Fitbit Sense 2',
      type: 'smartwatch',
      compatibility: '兼容',
      gradient: 'linear-gradient(120deg, #F87171 0%, #FCA5A5 100%)'
    },
    {
      name: '血压计 BPM Connect',
      type: 'bloodpressure',
      compatibility: '兼容',
      gradient: 'linear-gradient(120deg, #A78BFA 0%, #C4B5FD 100%)'
    },
    {
      name: '体重秤 Body+',
      type: 'scale',
      compatibility: '兼容',
      gradient: 'linear-gradient(120deg, #FBBF24 0%, #FCD34D 100%)'
    }
  ];

  return (
    <div className="min-h-screen pt-20 px-6 md:px-10 pb-10">
      {/* Header Section */}
      <section 
        ref={headerRef}
        className={`max-w-7xl mx-auto mb-12 transition-all duration-700 delay-100 ${
          headerIsVisible ? 'opacity-100' : 'opacity-0 translate-y-10'
        }`}
      >
        <div className="text-center">
          <span className="inline-block bg-primary/10 text-primary px-4 py-1.5 rounded-full text-sm font-medium mb-4">
            设备
          </span>
          <h1 className="text-3xl md:text-4xl font-bold mb-4">
            连接您的健康设备
          </h1>
          <p className="text-foreground/70 max-w-2xl mx-auto">
            同步您的设备数据，实时追踪健康状况
          </p>
        </div>
      </section>

      {/* Connected Devices */}
      <section 
        ref={devicesRef}
        className={`max-w-7xl mx-auto mb-10 transition-all duration-700 delay-200 ${
          devicesAreVisible ? 'opacity-100' : 'opacity-0 translate-y-10'
        }`}
      >
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-2xl font-semibold">已连接设备</h2>
          <button className="flex items-center text-primary font-medium">
            <RefreshCw className="h-4 w-4 mr-1.5" />
            刷新设备
          </button>
        </div>
        
        <div className="grid md:grid-cols-3 gap-6">
          {connectedDevices.map((device, index) => (
            <DashboardCard
              key={device.name}
              title={device.name}
              icon={device.icon}
              gradient={device.gradient}
              className={`transition-all duration-500 delay-${index * 100}`}
            >
              <div className="mt-4">
                <div className="flex items-center mb-3">
                  <div className="flex items-center mr-4">
                    <div className="w-2 h-2 rounded-full bg-green-500 mr-1.5"></div>
                    <span className="text-sm">已连接</span>
                  </div>
                  <div className="flex items-center">
                    <span className="text-sm">电池 {device.batteryLevel}%</span>
                  </div>
                </div>
                
                <div className="mb-4">
                  <div className="h-1.5 w-full bg-muted rounded-full">
                    <div 
                      className={`h-full rounded-full ${
                        device.batteryLevel > 60 ? 'bg-green-500' : 
                        device.batteryLevel > 20 ? 'bg-amber-500' : 
                        'bg-red-500'
                      }`}
                      style={{ width: `${device.batteryLevel}%` }}
                    ></div>
                  </div>
                </div>
                
                <div className="flex justify-between items-center">
                  <span className="text-sm text-foreground/70">最近同步: {device.lastSync}</span>
                  <button className="text-sm text-primary font-medium">设置</button>
                </div>
              </div>
            </DashboardCard>
          ))}
          
          {/* Add Device Card */}
          <div className="glass-card rounded-xl p-6 border-2 border-dashed border-border flex flex-col items-center justify-center text-center h-full min-h-[200px] transition-all duration-500 hover:border-primary/50">
            <PlusCircle className="h-12 w-12 text-foreground/40 mb-4" />
            <h3 className="text-lg font-medium mb-1">添加新设备</h3>
            <p className="text-foreground/60 text-sm mb-4">连接更多设备以获取更全面的健康数据</p>
            <button className="text-primary font-medium flex items-center">
              <Bluetooth className="h-4 w-4 mr-1.5" />
              开始扫描
            </button>
          </div>
        </div>
      </section>

      {/* Device Data */}
      <section 
        ref={statsRef}
        className={`max-w-7xl mx-auto mb-16 transition-all duration-700 delay-300 ${
          statsAreVisible ? 'opacity-100' : 'opacity-0 translate-y-10'
        }`}
      >
        <h2 className="text-2xl font-semibold mb-6">设备数据</h2>
        
        <div className="grid md:grid-cols-3 gap-6">
          {deviceMetrics.map((metric, index) => (
            <div 
              key={metric.title} 
              className="glass-card rounded-xl p-5 transition-all duration-500 delay-100"
            >
              <div className="flex items-center mb-4">
                <div className={`w-10 h-10 rounded-full ${metric.bg} flex items-center justify-center mr-3`}>
                  <span className={metric.color}>{metric.icon}</span>
                </div>
                <div>
                  <p className="text-foreground/70 text-sm">{metric.title}</p>
                  <div className="flex items-end">
                    <span className="text-2xl font-bold">{metric.value}</span>
                    <span className="text-foreground/70 ml-1 text-sm">{metric.unit}</span>
                  </div>
                </div>
              </div>
              
              <div className="flex items-center justify-between text-sm">
                <div className="flex items-center">
                  <span className={`font-medium ${
                    metric.change.startsWith('+') ? 'text-green-500' : 
                    metric.change.startsWith('-') ? 'text-amber-500' : 
                    'text-foreground/70'
                  }`}>
                    {metric.change.startsWith('+') ? metric.change : metric.change.startsWith('-') ? metric.change : `±${metric.change}`}
                    {metric.unit}
                  </span>
                  <span className="text-foreground/50 ml-1">vs 昨天</span>
                </div>
                <span className="text-foreground/70">来源: {metric.source}</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Compatible Devices */}
      <section className="max-w-7xl mx-auto">
        <h2 className="text-2xl font-semibold mb-6">兼容设备</h2>
        
        <div className="glass-card rounded-xl p-6">
          <p className="text-foreground/70 mb-6">
            以下是与本应用兼容的健康设备，您可以购买并连接这些设备来扩展健康监测
          </p>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
            {availableDevices.map((device) => (
              <div 
                key={device.name}
                className="p-4 border border-border rounded-lg hover:border-primary/50 transition-all"
              >
                <h3 className="font-medium mb-1">{device.name}</h3>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-foreground/70">{device.type}</span>
                  <span className="text-sm text-green-500 flex items-center">
                    <Check className="h-3 w-3 mr-1" />
                    {device.compatibility}
                  </span>
                </div>
              </div>
            ))}
          </div>
          
          <div className="mt-6 text-center">
            <button className="text-primary font-medium">
              查看所有兼容设备 →
            </button>
          </div>
        </div>
      </section>

      {/* Data Visualization */}
      <section className="max-w-7xl mx-auto mt-16">
        <div className="glass-card rounded-xl p-6">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-xl font-semibold">设备数据趋势</h2>
            <div className="flex gap-2">
              <button className="text-sm bg-white/70 hover:bg-white px-3 py-1 rounded-full transition-colors">
                日
              </button>
              <button className="text-sm bg-primary text-white px-3 py-1 rounded-full">
                周
              </button>
              <button className="text-sm bg-white/70 hover:bg-white px-3 py-1 rounded-full transition-colors">
                月
              </button>
            </div>
          </div>
          <div className="h-80 flex items-center justify-center">
            <div className="text-center">
              <BarChart3 className="h-10 w-10 text-muted-foreground mx-auto mb-2" />
              <p className="text-muted-foreground">连接您的设备以查看详细健康数据趋势</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default WearableDevices;
